<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:composite="http://java.sun.com/jsf/composite">
<head>
<title>Accessible date picker. Edit date as 3 separated fields
	or more if time is used. See also ...web.component.DatePicker java
	class. Note that bean validation works! It was inspired from
	http://weblogs.java.net/blog/cayhorstmann/archive/2010/01/30/composite-input-components-jsf
</title>
</head>
<body>
	<composite:interface componentType="components.DatePicker">
		<composite:attribute name="value" required="true" />
		<composite:attribute name="label" required="true" />
		<composite:attribute name="yearMin" required="false" default="1999"
			type="int" />
		<composite:attribute name="yearMax" required="false" default="2015"
			type="int" />
		<composite:attribute name="showDayOfWeek" required="false"
			default="false" type="boolean" />
		<composite:attribute name="timeRendered" required="false"
			default="false" type="boolean" />
		<composite:attribute name="disabled" required="false" default="false"
			type="boolean" />
	</composite:interface>

	<composite:implementation>

		<div id="#{cc.clientId}:div">
			<a id="#{cc.clientId}" onfocus="APP.focusTo('#{cc.clientId}:day')"
				style="display: none" />
			<h:selectOneMenu id="day" title="${msg.day} ${cc.attrs.label}"
				disabled="#{cc.attrs.disabled}">
				<f:selectItems
					value="#{datePickerHelper.getDays(cc.clientId, cc.attrs.showDayOfWeek)}" />
				<f:ajax event="change" />
			</h:selectOneMenu>

			<h:selectOneMenu id="month" title="${msg.month} ${cc.attrs.label}"
				disabled="#{cc.attrs.disabled}">
				<f:selectItems value="#{datePickerHelper.getMonths()}" />
				<f:ajax event="change" render="day" />
			</h:selectOneMenu>

			<h:selectOneMenu id="year" title="${msg.year} ${cc.attrs.label}"
				disabled="#{cc.attrs.disabled}">
				<f:selectItems
					value="#{datePickerHelper.getYears(cc.attrs.yearMin, cc.attrs.yearMax)}" />
				<f:ajax event="change" render="day" />
			</h:selectOneMenu>

			<h:outputText value=" : " rendered="#{cc.attrs.timeRendered}" />

			<h:selectOneMenu id="hour" title="${msg.hour} ${cc.attrs.label}"
				rendered="#{cc.attrs.timeRendered}" disabled="#{cc.attrs.disabled}">
				<f:selectItems value="#{datePickerHelper.getHours()}" />
			</h:selectOneMenu>

			<h:selectOneMenu id="minute" title="${msg.minute} ${cc.attrs.label}"
				rendered="#{cc.attrs.timeRendered}" disabled="#{cc.attrs.disabled}">
				<f:selectItems value="#{datePickerHelper.getMinutes()}" />
			</h:selectOneMenu>
		</div>
	</composite:implementation>
</body>
</html>